import { Colors } from "@/constants/Colors";
import { useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import IndexAllScreen from "./index_all";
import IndexFollowScreen from "./index_follow";

export default function HomeScreen() {
  const [activeTab, setActiveTab] = useState<"all" | "follow">("all");

  const renderContent = () => {
    switch (activeTab) {
      case "all":
        return <IndexAllScreen />;
      case "follow":
        return <IndexFollowScreen />;
      default:
        return <IndexAllScreen />;
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <View style={styles.tabContainer}>
          <Text
            style={[
              styles.tabButton,
              activeTab === "all" && styles.activeTabButton,
            ]}
            onPress={() => setActiveTab("all")}
          >
            全部
          </Text>
          <Text
            style={[
              styles.tabButton,
              activeTab === "follow" && styles.activeTabButton,
            ]}
            onPress={() => setActiveTab("follow")}
          >
            关注
          </Text>
        </View>
      </View>
      <View style={styles.content}>{renderContent()}</View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  header: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: "#e0e0e0",
  },

  tabContainer: {
    flexDirection: "row",
    justifyContent: "center",
    gap: 20,
  },
  tabButton: {
    fontSize: 16,
    color: Colors.light.text,
    paddingVertical: 8,
    paddingHorizontal: 16,
    borderWidth: 1,
    borderColor: Colors.light.tint,
    borderRadius: 20,
    textAlign: "center",
    minWidth: 80,
  },
  activeTabButton: {
    backgroundColor: Colors.light.tint,
    color: Colors.light.background,
  },
  content: {
    flex: 1,
  },
});
